<template>
    <div class="teamBody">
        <div class="row">
            <div class="col-xs-9 col-sm-9 col-md-9" style="padding:0 5px;">
                <div class="jumbotron" style="margin-bottom:10px;">
                    <h2>411661个计划</h2>
                    <p>653169人关注-1370956人报名</p>
                    <p>快来加入我们吧！</p>
                </div>
                <transition name="fade">
                    <div v-show="tran" style="animation-duration:1.6s;">
                        <div
                            class="card"
                            v-for="(item,index) in teamList"
                            :key="index"
                            @click="gotodetails"
                            ref="cardRef"
                        >
                            <div style="padding:0;width:160px">
                                <img height="100%" :src="item.src" />
                            </div>
                            <div style="padding:5px">
                                <div class="cardRi">
                                    <div>
                                        地点:
                                        <span class="blueFont">{{item.destination}}</span>
                                    </div>
                                    <div>
                                        时间:
                                        <span class="blueFont">{{item.time}}</span>
                                    </div>
                                    <div>
                                        人数:
                                        <span class="blueFont">{{item.peopleNum}}</span>
                                    </div>
                                </div>
                                <div class="hiddenText" style="-webkit-line-clamp: 6;">
                                    <span class="blueFont">详细计划:</span>
                                    {{item.plan}}
                                </div>
                            </div>
                        </div>
                        <!-- end -->
                    </div>
                </transition>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 rightList" style="position: sticky;top: 10px;">
                <el-card class="box-card">
                    <sort v-model="list" @an_alterSort="an_alterSort" />
                    <div
                        style="background-color: #DCDFE6;position: relative;display: block;height: 1px;width: 100%;margin-bottom:10px;"
                    ></div>

                    <span style="color: rgb(64, 158, 255);font-weight: 700;font-size: 16px;">结伴同游导航</span>
                    <div
                        style="justify-content: flex-end;display: flex;color: gray;font-size: 12px;"
                    >(支持四个筛选条件)</div>
                    <p>
                        <el-tag
                            v-for="tag in tags"
                            :key="tag.name"
                            closable
                            :type="tag.type"
                            @close="handleClose(tag)"
                        >{{tag.name}}</el-tag>
                    </p>

                    <el-collapse accordion value="2">
                        <el-collapse-item title=" 旅游地点" name="1">
                            <el-badge
                                :value="item.value"
                                class="item"
                                v-for="(item,index) in gnList"
                                :key="index"
                            >
                                <el-button size="mini" @click="addTags(item.name)">{{item.name}}</el-button>
                            </el-badge>
                        </el-collapse-item>
                        <el-collapse-item title=" 出发时间" name="2">
                            <el-calendar v-model="time">
                                <div slot="dateCell" slot-scope="{data}">
                                    <p
                                        :class="data.isSelected ? 'is-selected' : ''"
                                        @click="addTags(data.day.split('-').slice(1).join('-'))"
                                    >{{ data.day.split('-').slice(2).join() }}</p>
                                </div>
                            </el-calendar>
                        </el-collapse-item>
                    </el-collapse>
                </el-card>
                <div style="margin-top: 15px;">
                    <el-button type="primary" plain @click="gotoLook">我也要找队友</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import sort from "../mycomponents/sort.vue";
export default {
    components: {
        sort
    },
    data() {
        return {
            tran: true,
            formInline: {
                destination: null,
                time: null
            },
            gnList: [
                { name: "云南", value: "25" },
                { name: "北京", value: "23" },
                { name: "台湾", value: "17" },
                { name: "山东", value: "16" },
                { name: "内蒙古", value: "15" },
                { name: "广西", value: "14" },
                { name: "江西", value: "13" },
                { name: "青海", value: "12" },
                { name: "河南", value: "12" },
                { name: "黑龙江", value: "12" },
                { name: "新疆", value: "10" },
                { name: "安徽", value: "8" },
                { name: "海南", value: "8" },
                { name: "吉林", value: "5" },
                { name: "甘肃", value: "3" },
                { name: "山西", value: "3" },
                { name: "陕西", value: "2" }
            ],
            time: new Date(),
            teamList: [
                {
                    id: 1,
                    destination: "故宫",
                    time: "2020-5-20",
                    peopleNum: "4",
                    plan: `北京故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。北京故宫于明成祖永乐四年（1406年）开始建设，以南京故宫为蓝本营建，到永乐十八年（1420年）建成。它是一座长方形城池，南北长961米，东西宽753米，四面围有高10米的城墙，城外有宽52米的护城河。紫禁城内的建筑分为外朝和内廷两部分。外朝的中心为太和殿、中和殿、保和殿，统称三大殿，是国家举行大典礼的地方。内廷的中心是乾清宫、交泰殿、坤宁宫，统称后三宫，是皇帝和皇后居住的正宫。  北京故宫是世界上现存规模最大、保存最为完整的木质结构古建筑之一，是国家AAAAA级旅游景区， 1961年被列为第一批全国重点文物保护单位；  1987年被列为世界文化遗产。`,
                    src: require("../../../static/images/rightList_1.jpeg")
                },
                {
                    id: 2,
                    destination: "天安门广场",
                    time: "2020-5-22",
                    peopleNum: "5",
                    plan: `天安门广场，位于北京市中心，地处北京市东城区东长安街，北起天安门，南至正阳门，东起中国国家博物馆，西至人民大会堂，南北长880米，东西宽500米，面积达44万平方米  北京故宫是世界上现存规模最大、保存最为完整的木质结构古建筑之一，是国家AAAAA级旅游景区， 1961年被列为第一批全国重点文物保护单位；  1987年被列为世界文化遗产。`,
                    src: require("../../../static/images/rightList_2.jpeg")
                },
                {
                    id: 3,
                    destination: "八达岭长城",
                    time: "2020-5-30",
                    peopleNum: "6",
                    plan: `八达岭长城，位于北京市延庆区军都山关沟古道北口。是中国古代伟大的防御工程万里长城的重要组成部分，是明长城的一个隘口。八达岭长城为居庸关的重要前哨，古称“居庸之险不.八达岭长城，位于北京市延庆区军都山关沟古道北口。是中国古代伟大的防御工程万里长城的重要组成部分，是明长城的一个隘口。八达岭长城为居庸关的重要前哨，古称“居庸之险不`,
                    src: require("../../../static/images/rightList_3.jpeg")
                },
                {
                    id: 4,
                    destination: "南锣鼓巷",
                    time: "2020-6-05",
                    peopleNum: "3",
                    plan: `南锣鼓巷是一条胡同，位于北京中轴线东侧的交道口地区，北起鼓楼东大街，南至平安大街，宽8米，全长787米，于大都同期建成。是北京最古老的街区之一，已有740多年的历史。南锣鼓巷是一条胡同，位于北京中轴线东侧的交道口地区，北起鼓楼东大街，南至平安大街，宽8米，全长787米，于大都同期建成。是北京最古老的街区之一，已有740多年的历史。`,
                    src: require("../../../static/images/rightList_4.jpeg")
                },
                {
                    id: 5,
                    destination: "颐和园",
                    time: "2020-5-20",
                    peopleNum: "4",
                    plan: `颐和园卫生间全部设有无障碍设施,其中无障碍独立卫生间6处,分别为养云轩、半壁桥、 西堤南口、南湖岛、耕织图南、耕织图北。颐和园卫生间全部设有无障碍设施,其中无障碍独立卫生间6处,分别为养云轩、半壁桥、 西堤南口、南湖岛、耕织图南、耕织图北。`,
                    src: require("../../../static/images/rightList_5.jpeg")
                }
            ],
            tags: [],
            // isact: 1,
            list: ["精选推荐", "热门结伴", "最新发表"]
        };
    },
    methods: {
        transition() {
            if (this.tran == true) {
                this.tran = false;
            } else {
                this.tran = true;
            }
        },
        async addTags(name) {
            let jub = true;
            this.tags.forEach(element => {
                if (element.name == name) {
                    jub = false;
                }
            });
            if (this.tags.length == 0 || (this.tags.length < 4 && jub)) {
                await this.transition();
                this.tags.push({ name, type: "" });
                this.teamList.reverse();
                this.transition();
            }
        },
        async handleClose(tag) {
            await this.transition();
            this.tags.splice(this.tags.indexOf(tag), 1);
            this.teamList.reverse();
            this.transition();
        },
        async an_alterSort() {
            await this.transition();
            this.teamList.reverse();
            this.transition();
        },
        gotodetails() {
            this.$router.push({ path: "/details" });
        },
        gotoLook() {
            if (!this.$global.user) {
                this.$router.push({
                    path: "/dl",
                    query: { path: this.$route.path }
                });
            } else {
                this.$router.push({ path: "/team/look" });
            }
        },
        throttle(fun, delay, time) {
            var timeout,
                startTime = new Date();

            return () => {
                var curTime = new Date();

                clearTimeout(timeout);
                // 如果达到了规定的触发时间间隔，触发 handler
                if (curTime - startTime >= time) {
                    fun();
                    startTime = curTime;
                    // 没达到触发间隔，重新设定定时器
                } else {
                    timeout = setTimeout(fun, delay);
                }
            };
        }
    },
    mounted() {
        let i = document.getElementsByClassName(
            "el-button el-button--plain el-button--mini"
        );
        i[0].innerHTML = "<i class='el-icon-caret-top' />";
        i[1].innerHTML = "<i class='el-icon-s-home' />";
        i[2].innerHTML = "<i class='el-icon-caret-bottom' />";

        var that = this;
        function lazyload() {
            //监听页面滚动事件
            var seeHeight = document.documentElement.clientHeight; //可见区域高度
            var scrollTop = document.documentElement.scrollTop; //滚动条距离顶部高度
            var end = that.$refs.cardRef.length - 1; //现有的数组长度

            if (that.$refs.cardRef[end].offsetTop < seeHeight + scrollTop) {
                //添加新的图片
                that.$data.teamList.push(
                    {
                        id: 1,
                        destination: "故宫",
                        time: "2020-5-20",
                        peopleNum: "4",
                        plan: `北京故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。北京故宫于明成祖永乐四年（1406年）开始建设，以南京故宫为蓝本营建，到永乐十八年（1420年）建成。它是一座长方形城池，南北长961米，东西宽753米，四面围有高10米的城墙，城外有宽52米的护城河。紫禁城内的建筑分为外朝和内廷两部分。外朝的中心为太和殿、中和殿、保和殿，统称三大殿，是国家举行大典礼的地方。内廷的中心是乾清宫、交泰殿、坤宁宫，统称后三宫，是皇帝和皇后居住的正宫。  北京故宫是世界上现存规模最大、保存最为完整的木质结构古建筑之一，是国家AAAAA级旅游景区， 1961年被列为第一批全国重点文物保护单位；  1987年被列为世界文化遗产。`,
                        src: require("../../../static/images/rightList_1.jpeg")
                    },
                    {
                        id: 2,
                        destination: "天安门广场",
                        time: "2020-5-22",
                        peopleNum: "5",
                        plan: `天安门广场，位于北京市中心，地处北京市东城区东长安街，北起天安门，南至正阳门，东起中国国家博物馆，西至人民大会堂，南北长880米，东西宽500米，面积达44万平方米  北京故宫是世界上现存规模最大、保存最为完整的木质结构古建筑之一，是国家AAAAA级旅游景区， 1961年被列为第一批全国重点文物保护单位；  1987年被列为世界文化遗产。`,
                        src: require("../../../static/images/rightList_2.jpeg")
                    },
                    {
                        id: 3,
                        destination: "八达岭长城",
                        time: "2020-5-30",
                        peopleNum: "6",
                        plan: `八达岭长城，位于北京市延庆区军都山关沟古道北口。是中国古代伟大的防御工程万里长城的重要组成部分，是明长城的一个隘口。八达岭长城为居庸关的重要前哨，古称“居庸之险不.八达岭长城，位于北京市延庆区军都山关沟古道北口。是中国古代伟大的防御工程万里长城的重要组成部分，是明长城的一个隘口。八达岭长城为居庸关的重要前哨，古称“居庸之险不`,
                        src: require("../../../static/images/rightList_3.jpeg")
                    },
                    {
                        id: 4,
                        destination: "南锣鼓巷",
                        time: "2020-6-05",
                        peopleNum: "3",
                        plan: `南锣鼓巷是一条胡同，位于北京中轴线东侧的交道口地区，北起鼓楼东大街，南至平安大街，宽8米，全长787米，于大都同期建成。是北京最古老的街区之一，已有740多年的历史。南锣鼓巷是一条胡同，位于北京中轴线东侧的交道口地区，北起鼓楼东大街，南至平安大街，宽8米，全长787米，于大都同期建成。是北京最古老的街区之一，已有740多年的历史。`,
                        src: require("../../../static/images/rightList_4.jpeg")
                    },
                    {
                        id: 5,
                        destination: "颐和园",
                        time: "2020-5-20",
                        peopleNum: "4",
                        plan: `颐和园卫生间全部设有无障碍设施,其中无障碍独立卫生间6处,分别为养云轩、半壁桥、 西堤南口、南湖岛、耕织图南、耕织图北。颐和园卫生间全部设有无障碍设施,其中无障碍独立卫生间6处,分别为养云轩、半壁桥、 西堤南口、南湖岛、耕织图南、耕织图北。`,
                        src: require("../../../static/images/rightList_5.jpeg")
                    }
                );
            }
        }
        // 采用了节流函数
        window.addEventListener("scroll", that.throttle(lazyload, 500, 1000));
    }
};
</script>
<style>
div.teamBody {
    margin: 10px 50px;
}

/* div.teamBody li.actived {
    color: #2494fc;
    font-weight: 700;
    box-shadow: 1px 1px 1px 0 #2494fc8a;
    border-radius: 3px;
    font-size: 17px;
}

div.teamBody div.rightList {
    padding: 0 5px;
    right: 20px;
    left: auto;
    top: auto;
    z-index: 0;
} */

/* 巨幕 */
div.teamBody div.jumbotron {
    background-image: url(../../../static/images/lb_3.jpg);
    color: #fff;
    padding: 10px;
}

/* card */
div.teamBody .card {
    margin-top: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 160px;
    display: flex;
}

div.teamBody div.cardRi {
    display: flex;
    justify-content: space-around;
    font-size: 15px;
    line-height: 200%;
}

div.teamBody span.blueFont {
    font-weight: 700;
    color: rgb(64, 158, 255);
    font-size: 17px;
}

/* 日历 */
div.teamBody div.el-calendar__body {
    padding: 0;
}
div.teamBody .el-calendar-table thead th {
    text-align: center;
    padding: 0;
}
div.teamBody div.el-calendar-day {
    height: auto;
    padding: 5px;
    text-align: center;
    line-height: 15px;
}
div.teamBody div.el-calendar-day p {
    margin: 0;
}
div.teamBody button.el-button.el-button--plain.el-button--mini {
    padding: 5px;
}

.is-selected {
    color: #1989fa;
}

/* right card */
div.teamBody .item {
    margin-top: 15px;
    margin-right: 8px;
}

div.teamBody sup.el-badge__content.is-fixed {
    right: 22px;
    font-size: 12px;
}
</style>
